import { ChangeDetectionStrategy, Component } from '@angular/core';
import { LvCalendarEvents, LvCalendarMode } from '@iux/live';

const DATE = new Date();
const YEAR = DATE.getFullYear();
const MONTH = DATE.getMonth();
const PRE_MONTH = DATE.getMonth() - 1;
const NEXT_MONTH = DATE.getMonth() + 1;

const Events: LvCalendarEvents[] = [
  {
    id: 1,
    title: '江苏紫金银行活动1',
    startDate: new Date(YEAR, PRE_MONTH, 29),
    endDate: new Date(YEAR, MONTH, 2),
    type: 1,
  },
  {
    id: 2,
    title: '江苏紫金银行活动2',
    startDate: new Date(YEAR, MONTH, 2),
    type: 2,
  },
  {
    id: 3,
    title: '江苏紫金银行活动3',
    startDate: new Date(YEAR, MONTH, 2),
    endDate: new Date(YEAR, MONTH, 4),
    type: 3,
  },
  {
    id: 4,
    title: '江苏紫金银行活动4',
    startDate: new Date(YEAR, MONTH, 7),
    type: 2,
    tips: {
      title: '江苏紫金银行客户满意活动',
      time: '2020/11/03 14:00 - 2020/11/03 16:30',
      address: '紫金农商银行 中山东路 会议室',
      product: 'Ideahub Pro, OceanStor 100D',
      developer: '高承财 g00254615， 梁烨 l00254675',
      maintain: ' 周洋洋 z00254698， 魏凯 w00365854',
    },
  },
  {
    id: 5,
    title: '江苏紫金银行活动5',
    startDate: new Date(YEAR, MONTH, 5),
    endDate: new Date(YEAR, MONTH, 7),
    type: 4,
  },
  {
    id: MONTH,
    title: '江苏紫金银行活动6',
    startDate: new Date(YEAR, MONTH, 16),
    endDate: new Date(YEAR, MONTH, 16),
    type: 5,
  },
  {
    id: 7,
    title: '江苏紫金银行活动7',
    startDate: new Date(YEAR, MONTH, 19),
    endDate: new Date(YEAR, MONTH, 23),
    type: 5,
  },
  {
    id: 8,
    title: '江苏紫金银行活动8',
    startDate: new Date(YEAR, MONTH, 20),
    endDate: new Date(YEAR, MONTH, 21),
    type: 6,
  },
  {
    id: 9,
    title: '江苏紫金银行活动9',
    startDate: new Date(YEAR, MONTH, 20),
    type: 4,
  },
  {
    id: 10,
    title: '江苏紫金银行活动10',
    startDate: new Date(YEAR, MONTH, 20),
    endDate: new Date(YEAR, MONTH, 22),
    type: 2,
  },
  {
    id: 11,
    title: '江苏紫金银行活动11',
    startDate: new Date(YEAR, MONTH, 30),
    endDate: new Date(YEAR, NEXT_MONTH, 2),
    type: 3,
  },
];

@Component({
  templateUrl: './event-template.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styles: [
    `
      .aui-calendar-event-item {
        padding: 0 0.08rem;
        margin-right: 0.01rem;
        line-height: 0.24rem;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .aui-calendar-event-type1 {
        background-color: #41cce1;
      }
      .aui-calendar-event-type2 {
        background-color: #63b6f7;
      }
      .aui-calendar-event-type3 {
        background-color: #a7dd82;
      }
      .aui-calendar-event-type4 {
        background-color: #7adfa0;
      }
      .aui-calendar-event-type5 {
        background-color: #a97af8;
      }
      .aui-calendar-event-type6 {
        background-color: #f3689a;
      }
      .aui-change-mode {
        display: flex;
        justify-content: flex-end;
      }
      ::ng-deep .aui-mode-switch .lv-button.lv-button-size-default {
        min-width: auto;
      }
      .aui-event-tips {
        color: #fff;
      }
      ::ng-deep.customer.lv-tooltip .lv-tooltip-container {
        max-width: none;
      }
    `,
  ],
})
export class EventTemplateComponent {
  date: Date = DATE;
  currentMode: LvCalendarMode = 'month';
  events: LvCalendarEvents[] = Events;
  visible: any;

  dateChange(date) {
    console.log('dateChange:', date);
  }

  activeDateChange(date) {
    console.log('activeDateChange:' + date.value.localDate);
  }

  modeChange(mode) {
    this.currentMode = mode;
  }

  create(e) {
    alert('创建事件');
  }
}
